<!-- DROPDOWN BUTTONS -->
<section  id="buttons-dropdown" class="showcase  showcase-content background-light">
  <header class="l-center">
    <h3 class="showcase-title">Dropdown Buttons</h3>
    <h4 class="showcase-sub-title">A dropdown menu appears when the button is pressed</h4>
  </header>


<div class="showcase-examples l-center">
<span class="button-dropdown" data-buttons="dropdown">
  <button class="button button-rounded">
    Select Me <i class="fa fa-caret-down"></i>
  </button>

  <ul class="button-dropdown-list">
    <li><a href="http://unicorn-ui.com/">Option Link 1</a></li>
    <li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</span>

<span class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
  <button class="button button-primary button-large">
    <i class="fa fa-bars"></i> Select Me
  </button>

  <ul class="button-dropdown-list is-below">
    <li><a href="http://unicorn-ui.com/"><i class="fa fa-heart-o"></i> Option Link 1</a></li>
    <li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</span>


<span class="button-dropdown button-dropdown-action" data-buttons="dropdown">
  <button class="button button-action">
    Select Me <i class="fa fa-caret-up"></i>
  </button>

  <ul class="button-dropdown-list is-above">
    <li><a href="http://unicorn-ui.com/">Option Link 1</a></li>
    <li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</span>

<span class="button-dropdown button-dropdown-plain" data-buttons="dropdown">
  <button class="button button-caution button-pill">
    Select Me <i class="fa fa-caret-down"></i>
  </button>

  <ul class="button-dropdown-list">
    <li><a href="http://unicorn-ui.com/">Option Link 1</a></li>
    <li class="button-dropdown-divider">
      <a href="http://unicorn-ui.com/">Option Link 2</a>
    </li>
    <li>
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</span>

<span class="button-dropdown button-dropdown-inverse" data-buttons="dropdown">
  <a href="#" class="button button-inverse">
      <i class="fa fa-envelope"></i> Select Me <i class="fa fa-caret-down"></i>
  </a>

  <ul class="button-dropdown-list is-below">
    <li><a href="http://unicorn-ui.com/">Option Link 1</a></li>
    <li class="button-dropdown-divider">
      <a href="http://unicorn-ui.com/">Option Link 2</a>
    </li>
    <li>
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</span></div>
</section>
